<template>
	<div class="chart-wrap">
		<div class="chart">
			<!-- <div class="title" v-show="show">
				<p class="title-name">{{title.name}}</p>
				<p class="title-value">{{title.value}}</p>
			</div>-->
			<div :id="id" class="main"></div>
		</div>
		<!-- <div class="legend">
			<div :key="item.name" class="legend-item" v-for="(item,index) in value">
				<span :style="{background:item.color || colors[index % colors.length]}" class="icon"></span>
				<span class="name">{{item.name}}</span>
				<span class="value">{{item.value}}{{unit}}</span>
			</div>
		</div>-->
	</div>
</template>
<script>
import rangeStr from '@utils/base/rangeStr'
import { debounce } from 'lodash'

import * as echarts from 'echarts/core' // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import { SVGRenderer } from 'echarts/renderers' // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { PieChart, GaugeChart } from 'echarts/charts' // 引入柱状图图表，图表后缀都为 Chart
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components' // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
echarts.use([TooltipComponent, GridComponent, LegendComponent, PieChart, GaugeChart, SVGRenderer]) // 注册必须的组件
export default {
  name: 'CircleCharts',
  // props: {
  //   value: Array,
  //   title: Object,
  //   name: String,
  //   unit: String,
  //   colors: {
  //     type: Array,
  //     default: () => ['#FFEA2C', '#E59B2A', '#E56D2A', '#392AE5', '#2a80e5']
  //   }
  // },
  data() {
    return {
      show: true,
      chart: null,
      id: rangeStr(),
      resize: null
    }
  },
  watch: {
    value(val) {
      this.$nextTick(() => {
        this.initChart(val)
      })
    }
  },

  mounted() {
    this.initChart(this.value)
    this.resize = debounce(() => {
      this.chart && this.chart.resize()
    }, 200)
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    initChart(data) {
      this.chart && this.chart.dispose()
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        grid: { left: '0px', right: '30px', top: '10px', bottom: '30px' },
        legend: {
          orient: 'vertical',
          itemGap: 15,
          right: 30,
          top: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          textStyle: {
            color: '#fff',
            fontSize: 12,
          }
        },
        color: ['#2d5fa9', '#FFEA2C', '#E59B2A', '#E56D2A', '#392AE5', '#2a80e5'],
        series: [
          {
            type: 'pie',
            radius: ['70%', '72%'],
            center: ['30%', '40%'],
            silent: true,
            labelLine: {
              show: false
            },


            data: [{
              value: 10,
              itemStyle: {
                normal: {
                  borderWidth: 2,//设置边框粗细
                  borderColor: 'rgb(9,37,71, 0.5)'//边框颜色
                }
              }
            }]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['30%', '40%'],
            label: {
              show: false,
              position: 'center',
            },
            calculable: false,
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'normal'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
        // series: [
        //   {
        //     name: this.name,
        //     type: 'pie',
        //     radius: ['50%', '60%'],
        //     startAngle: 0,
        //     minAngle: 10,
        //     itemStyle: {
        //       borderRadius: 10,
        //       borderWidth: 5,
        //       borderColor: '#fff',
        //       color: param => {
        //         console.log('param', param);
        //         return param.data.color || this.colors[param.dataIndex % this.colors.length]
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: 'center'
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         formatter: '{name|{b}}\n{value|{d}%}',
        //         rich: {
        //           name: { fontSize: 14, lineHeight: 30 },
        //           value: { fontSize: 25, fontWeight: 500 }
        //         }
        //       }
        //     },
        //     labelLine: false,
        //     data
        //   }
        // ]
      })
      this.chart.on('mouseover', () => {
        this.show = false
      })
      this.chart.on('mouseout', () => {
        this.show = true
      })
    }
    // resize() {
    // 	this.chart && this.chart.resize()
    // }
  }
}
</script>
<style lang="scss" scoped>
.chart-wrap {
	width: 100%;
	height: 200px;
	display: flex;
	.chart {
		flex: 1;
		position: relative;
		overflow: hidden;
		.title {
			width: auto;
			height: auto;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			p {
				color: '#000';
				text-align: center;
			}
			.title-name {
				font-size: 14px;
				line-height: 30px;
			}
			.title-value {
				font-size: 25px;
				font-weight: 500;
			}
		}
		.main {
			width: 100%;
			height: 100%;
		}
	}
	.legend {
		padding: 10px;
		margin-top: auto;
		&-item {
			margin-bottom: 10px;
			font-size: 13px;
			display: flex;
			align-items: center;
			.icon {
				display: inline-block;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 8px;
			}
			.name {
				margin-right: 15px;
			}
			.value {
				margin-left: auto;
			}
		}
	}
}
</style>
